<template>
  <div class="page-main" ref="pageMainRef">

    <div class="formMain">

      <div class="container">
        <div class="logo">
          <img :src="header_logo" style="width: 100px; height: 100px" alt="Logo" />
        </div>
        <div class="title">日间手术评估及申请单</div>
        <div class="sn">日间序号：{{ state.serialNumber ? state.serialNumber : '未生成' }}</div>
      </div>

      <div v-loading="state.confirmLoading">
        <el-row :gutter="30">
          <el-col :span="24" class="jz-card">
            <el-card class="order-card1" shadow="hover">
              <template #header>
                <span class="card-title-ic"> &nbsp;</span>
                <span class="card-title"> 就诊信息</span>
                <span class="card-confirm">
                  <el-icon class="card-confirm-icon">
                    <ele-Select />
                  </el-icon> 就诊信息已确认
                </span>
              </template>

              <div class="op-list">
                <el-form ref="patientDetailFormRef" :model="patientDetail" :rules="patientDetailRules"
                  label-width="120px">
                  <el-row class="form-row">
                    <el-col :span="6">
                      <el-form-item label="患者姓名" prop="hzxm" inline class="form-item-border">
                        <el-input v-model="patientDetail.hzxm" placeholder="请输入患者姓名"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="性别" prop="sex" inline class="form-item-border">
                        <el-radio-group v-model="patientDetail.sex" size="default">
                          <el-radio label="1">男</el-radio>
                          <el-radio label="2">女</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="年龄" prop="age" inline class="form-item-border">
                        <el-input v-model="patientDetail.age" placeholder="请输入患者年龄" style="width:80px"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="身份证号" prop="sfzh" inline class="form-item-border">
                        <el-input v-model="patientDetail.sfzh" placeholder="请输入身份证号"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row class="form-row" style="margin-top:20px;">
                    <el-col :span="6">
                      <el-form-item label="联系方式" prop="lxdh" inline class="form-item-border">
                        <el-input v-model="patientDetail.lxdh" placeholder="请输入联系方式"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="就诊科室" prop="ksmc" inline class="form-item-border">
                        <el-select v-model="patientDetail.ksmc" clearable filterable>
                          <el-option v-for="item in state.departmentList" :label="item.departmentName"
                            :value="item.departmentName" @click="departmentChange(item.id)"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="就诊医生" prop="ysmc" inline class="form-item-border">
                        <el-select v-model="patientDetail.ysmc" clearable filterable>
                          <el-option v-for="item in state.doctorList" :label="item.name" :value="item.name"
                            @click="doctorChange(item.id)"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="入院诊断" prop="zyzdmc" inline class="form-item-border">
                        <el-select v-model="patientDetail.zyzdmc" clearable filterable>
                          <el-option v-for="item in state.diagnosisList" :label="item.name" :value="item.name"
                            placeholder="请选择入院诊断"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>

                  </el-row>

                </el-form>
                <!-- <div class="op-item flex space-between">
            
                <div class="item-right">
                  <div class="des-item">姓名：{{ patientDetail.hzxm }}</div>
                  <div class="des-item">性别:
                    <span v-if="patientDetail.sex == 1">男</span>
                    <span v-else>女</span>
                  </div>
                  <div class="des-item">年龄：{{ patientDetail.age }}</div>
                  <div class="des-item">身份证号:{{ patientDetail.sfzh }}</div>
                  <div class="des-item">联系方式:{{ patientDetail.lxdh }}</div>
                  <div class="des-item">就诊医生:{{ patientDetail.ysmc }}</div>
                  <div class="des-item">就诊科室:{{ patientDetail.ksmc }}</div>
                  <div class="des-item">入院诊断：{{ patientDetail.zyzdmc }}</div>
                </div>
              </div> -->
              </div>
            </el-card>
          </el-col>

          <el-col :span="24" style="margin-top: 5px;" class="op-card">
            <el-card class="order-card1" shadow="hover">
              <template #header>
                <span class="card-title-ic"> &nbsp;</span>
                <span class="card-title"> 手术信息</span>
                <!--              <span v-if="step==2" class="card-confirm confirm-after"-->
                <!--              ><el-icon class="card-confirm-icon"><ele-Select/></el-icon> 手术信息已确认</span-->
                <!--              >-->

                <span v-if="step == 1" class="card-confirm-after"><el-icon
                    class="card-confirm-icon"><ele-Select /></el-icon>
                  手术信息待确认</span>
              </template>

              <el-form ref="ruleFormRef" :model="operation_form" :rules="rules" label-width="120px">
                <el-row class="form-row">
                  <el-col :span="6">
                    <el-form-item label="手术科室" prop="department" inline class="form-item-border">
                      <el-select v-model="operation_form.department" clearable filterable @change="opDepartmentChange">
                        <el-option v-for="item in state.departmentList" :label="item.departmentName"
                          :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="入院病区" prop="hospital_area" inline class="form-item-border">
                      <el-select v-model="operation_form.hospital_area" clearable filterable @change="opAreaChange">
                        <el-option v-for="item in state.hospitalAreaList" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="主刀医生" prop="doctor" inline class="form-item-border">
                      <el-select v-model="operation_form.doctor" clearable filterable @change="opChiefDoctorChange">
                        <el-option v-for="item in state.chiefDoctorList" :label="item.name" :value="item.id"
                          @click="changeDoctor(item.phone)"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="联系电话" prop="contact" inline class="form-item-border">
                      <el-input v-model="operation_form.contact" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="6">
                  <el-form-item label="术前诊断" prop="diagnosis" inline class="form-item-border">
                    <el-select v-model="operation_form.diagnosis" clearable filterable>
                      <el-option v-for="item in state.diagnosisList" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col> -->

                </el-row>
                <el-row class="form-row form-row-no-margin" style="margin-top:20px;">
                  <el-col :span="6">
                    <el-form-item label="拟行手术" prop="operation" inline class="form-item-border">
                      <el-select v-model="operation_form.operation" clearable filterable>
                        <el-option v-for="item in state.operationList" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="麻醉医生" prop="anesthesia" inline class="form-item-border">
                      <el-select v-model="operation_form.anesthesia" clearable filterable>
                        <el-option v-for="item in state.anesthesiaDoctorList" :label="item.name"
                          :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="拟行麻醉" prop="anesthesia_mode" inline class="form-item-border">
                      <el-select v-model="operation_form.anesthesia_mode" clearable filterable>
                        <el-option v-for="item in state.anesthesiaModeList" :label="item.name"
                          :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>
            </el-card>
          </el-col>

          <el-col :span="24" style="margin-top: 5px;">
            <el-card class="order-card1" shadow="hover">
              <template #header>
                <span class="card-title-ic"> &nbsp;</span>
                <span class="card-title"> 日间评估</span>

                <!--              <span v-if="step==2" class="card-confirm confirm-after"-->
                <!--              ><el-icon class="card-confirm-icon"><ele-Select/></el-icon> 日间评估已完成</span-->
                <!--              >-->

                <span v-if="step == 1" class="card-confirm"><el-icon class="card-confirm-icon"><ele-Select /></el-icon>
                  日间评估已确认</span>


              </template>

              <div class="row " v-if="state.checkedList">

                <el-checkbox-group v-model="state.checkedIds" size="large" class="flex space-between">
                  <div class="row-left">
                    <div v-for="(item, i) in state.checkedList" :key="i">
                      <el-checkbox v-if="i < 3"  :label="item.id">{{
                        i + 1
                      }}.&nbsp;{{ item.text }}
                      </el-checkbox>
                    </div>
                  </div>

                  <div class="row-right">
                    <div v-for="(item, i) in state.checkedList" :key="i">
                      <el-checkbox v-if="i >= 3"  :label="item.id">{{
                        i + 1
                      }}.&nbsp;{{ item.text }}
                      </el-checkbox>
                    </div>
                  </div>

                </el-checkbox-group>


              </div>

            </el-card>
          </el-col>

          <el-col :span="24" v-if="step == 1" style="margin:20px 0;">
            <el-button @click="changeBedView()" type="primary" round style="position: absolute;left:36px;bottom:25px;">
              {{ !state.isViewAllBed ? '展开' : '收起' }}
            </el-button>

            <el-button @click="confirm(ruleFormRef)" type="primary"
              style="position: absolute;right:36px;bottom:25px;padding:27px 52px;">评估完成并发起申请
            </el-button>
          </el-col>

          <el-col :span="24" style="display:none;margin-top: 20px;">
            <el-card class="order-card1" shadow="hover">
              <!-- <template #header>
              <span class="card-title-ic"> &nbsp;</span>
              <span class="card-title"> 手术预约</span>
            </template> -->



              <!--          <div class="common-title">-->
              <!--            手术室预约-->
              <!--          </div>-->
              <!--          <div class="time-slot flex align-center">-->
              <!--            <span>手术时段</span>-->
              <!--            <el-radio-group v-model="state.timeSlot" @change="periodChange" size="default">-->
              <!--              <el-radio label="上午"/>-->
              <!--              <el-radio label="下午"/>-->
              <!--            </el-radio-group>-->
              <!--          </div>-->
              <!--          <div class="op-room-list" v-loading="state.departmentLoading">-->
              <!--            <div class="op-room-item flex space-between" v-for="(item, index) in state.operatRoomList" :key="index">-->
              <!--              <div class="item-left flex">-->
              <!--                <div class="icon">-->
              <!--                  <el-icon size="40" color="#3081F4">-->
              <!--                    <School/>-->
              <!--                  </el-icon>-->
              <!--                </div>-->
              <!--                <div class="name">-->
              <!--                  {{ item.name }}-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="item-right">-->
              <!--                <div class="op-item flex " v-for="(it, index) in item.num" :key="index"-->
              <!--                     :class="it.patient && (state.patient_record_id ===  it.patient.patientRecord.patient.id) ? 'selected' : ''">-->
              <!--                  <div-->
              <!--                      v-if="!it.patient || (it.patient && (state.patient_record_id ===  it.patient.patientRecord.patient.id))"-->
              <!--                      class="content" @click="changeSelectOp(item.value,it.value)">-->

              <!--                    <el-popover v-if="it.patient && (state.patient_record_id ===  it.patient.patientRecord.patient.id)"-->
              <!--                                placement="bottom" :width="200" trigger="hover" effect="dark">-->
              <!--                      <template #reference>-->
              <!--                        <div class="" style="width:100%;height:100%;">-->
              <!--                          {{ it.value + ' | ' + it.patient.patientRecord.patient.name }}-->
              <!--                        </div>-->
              <!--                      </template>-->
              <!--                      <div>-->
              <!--                        <div class="user-info-item">姓名: {{ it.patient.patientRecord.patient.name }}</div>-->
              <!--                        <div class="user-info-item">性别: {{ sexObj[it.patient.patientRecord.patient.gender] }}</div>-->
              <!--                        <div class="user-info-item">年龄:-->
              <!--                          {{ it.patient.patientRecord.age ? it.patient.patientRecord.age : '-' }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">诊断:-->
              <!--                          {{ it.patient.patientRecord.preDiagnosis ? it.patient.patientRecord.preDiagnosis : '-' }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">手术: {{-->
              <!--                            it.patient.operation ? it.patient.operation.name : '-'-->
              <!--                          }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">麻醉: {{-->
              <!--                            it.patient.patientRecord.anesthesiaAssessment && it.patient.patientRecord.anesthesiaAssessment.anesthesiaMode ? it.patient.patientRecord.anesthesiaAssessment.anesthesiaMode.name : '-'-->
              <!--                          }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">医生:-->
              <!--                          {{ it.patient && it.patient.chiefDoctor ? it.patient.chiefDoctor.name : '-' }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">手术时间: {{ it.patient.operationAt }}</div>-->
              <!--                      </div>-->
              <!--                    </el-popover>-->
              <!--                    <span v-else>-->
              <!--              {{ it.value }}-->
              <!--            </span>-->
              <!--                  </div>-->

              <!-- 不可选 -->
              <!--                  <div v-else class="content disabled">-->
              <!--                    <el-popover placement="bottom" :width="200" trigger="hover" effect="dark">-->
              <!--                      <template #reference>-->
              <!--                        <div class="disabled-name" style="width:100%;height:100%;">-->
              <!--                          {{ it.value + ' | ' + it.patient.patientRecord.patient.name }}-->
              <!--                        </div>-->
              <!--                      </template>-->
              <!--                      <div>-->
              <!--                        <div class="user-info-item">姓名: {{ it.patient.patientRecord.patient.name }}</div>-->
              <!--                        <div class="user-info-item">性别: {{ sexObj[it.patient.patientRecord.patient.gender] }}</div>-->
              <!--                        <div class="user-info-item">年龄:-->
              <!--                          {{ it.patient.patientRecord.age ? it.patient.patientRecord.age : '-' }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">诊断:-->
              <!--                          {{ it.patient.patientRecord.preDiagnosis ? it.patient.patientRecord.preDiagnosis : '-' }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">手术: {{-->
              <!--                            it.patient.operation ? it.patient.operation.name : '-'-->
              <!--                          }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">麻醉: {{-->
              <!--                            it.patient.patientRecord.anesthesiaAssessment && it.patient.patientRecord.anesthesiaAssessment.anesthesiaMode ? it.patient.patientRecord.anesthesiaAssessment.anesthesiaMode.name : '-'-->
              <!--                          }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">医生:-->
              <!--                          {{ it.patient && it.patient.chiefDoctor ? it.patient.chiefDoctor.name : '-' }}-->
              <!--                        </div>-->
              <!--                        <div class="user-info-item">手术时间: {{ it.patient.operationAt }}</div>-->
              <!--                      </div>-->
              <!--                    </el-popover>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--            </div>-->
              <!--          </div>-->

            </el-card>





          </el-col>

          <el-col :span="24" style="margin-top: -35px;">
            <el-card class="order-card1 btm-card space-card" shadow="hover">
              <template #header>
                <div class="header-left">
                  <span class="card-title-ic"> &nbsp;</span>
                  <span class="card-title"> 床位预约</span>
                </div>

                <div class="header-right">
                  <span style="margin-right: 10px;">病 区</span>
                  <el-select v-model="state.hospitalAreaId" placeholder="请选择病区" size="default" style="width: 150px;"
                    @change="searchBedChange">
                    <el-option v-for="(item, index) in state.hospitalAreaList" :key="index" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </div>
              </template>

              <div class="time-line flex ">
                <div class="time-top flex space-between align-center">
                  <el-button @click="nextOrPrevDayArr('prev')" :icon="ArrowLeftBold" size="default"
                    style="padding: 0 0 0 4px;" />
                  <div class="time-list" style="white-space: nowrap;">
                    <div class="time-item" v-for="(item, index) in state.dayArr" :key="index"
                      :class="item == state.checkedDay ? 'active' : ''" @click="changeDay(item)">
                      {{ formatValue(item) }}
                    </div>
                  </div>
                  <el-button @click="nextOrPrevDayArr('next')" :icon="ArrowRightBold" size="default"
                    style="padding: 0 0 0 4px;" />
                </div>

                <div class="time-bottom flex space-between align-center">
                  <el-button size="default" :icon="ArrowLeftBold" style="padding: 0 0 0 4px;visibility: hidden;" />
                  <div class="bottom-list">
                    <div class="bottom-item flex justify-center align-center" v-for="(item, index) in state.dayArr"
                      :key="index">
                      <div class="round" :class="item == state.checkedDay ? 'active' : ''">
                        <div class="center" :class="item == state.checkedDay ? 'active' : ''"></div>
                      </div>
                      <div v-if="index < state.dayArr.length - 1" class="line"></div>
                    </div>
                  </div>
                  <el-button size="default" :icon="ArrowLeftBold" style="padding: 0 0 0 4px;visibility: hidden;" />
                </div>

              </div>
              <!-- <div class="area-slot flex align-center" style="height:50px;">
              <span>病 区</span>

              <el-select v-model="state.hospitalAreaId" placeholder="请选择病区" size="default" style="width: 150px;"
                @change="searchBedChange">
                <el-option v-for="(item, index) in state.hospitalAreaList" :key="index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>

              <span style="margin-left:40px;">床位状态</span>
              <el-select v-model="state.bedStatus" placeholder="请选择床位状态" size="default" style="width: 150px;" clearable
                @change="searchBedChange">
                <el-option label="未预约" :value="0"></el-option>
                <el-option label="已预约" :value="1"></el-option>
              </el-select>
            </div> -->
              <div class="bed-box" v-loading="state.bedLoading">
                <!-- <el-scrollbar style="width:100%;height:168px;"> -->
                <div v-if="!state.isViewAllBed" class="bed-list">
                  <div class="bed-item flex " v-for="(item, index) in state.bedList.slice(0, 6)" :key="index"
                    :class="item.patientRecord ? 'selected' : ''">

                    <!-- 如果为可选 -->
                    <div v-if="!item.patientRecord" class="item-content" @click="changeSelectBed(item)">
                      <div class="item-header">
                        {{ item.number + '床' }}
                      </div>
                      <div class="item-bottom ">
                        <div v-if="item.patientRecord" class="user-info flex ">
                          <div class="user-info-item flex space-between">
                            <span>姓名: {{ item.patientRecord.patient.name }}</span>
                            <span>性别: {{ sexObj[item.patientRecord.patient.gender] }}</span>
                            <span>年龄: {{
                              item.patientRecord.age ? item.patientRecord.age : '-'
                            }}</span>
                          </div>

                          <div class="user-info-item">诊断: {{ item.patientRecord.preDiagnosis }}</div>
                          <div class="user-info-item">手术: {{
                            item.patientRecord.operation && item.patientRecord.operation.operation ?
                            item.patientRecord.operation.operation.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">麻醉: {{
                            item.patientRecord.anesthesiaAssessment &&
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode ?
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">医生: {{
                            item.patientRecord.operation && item.patientRecord.operation.chiefDoctor ?
                            item.patientRecord.operation.chiefDoctor.name : '-'
                          }}
                          </div>
                          <!-- <div class="user-info-item">{{
                            item.patientRecord.operation && item.patientRecord.operation.num ?
                            item.patientRecord.operation.operationRoom + '=>' + '第' + item.patientRecord.operation.num +
                            '台次' : '-'
                          }}
                          </div> -->
                          <!-- <div class="tip">当日入院</div> -->
                        </div>
                        <div v-else class="no-user ">
                          <div class="icon-box flex justify-center align-center">
                            <el-icon color="#B4AFAF" size="50">
                              <Postcard />
                            </el-icon>
                          </div>
                          <div class="icon-box flex justify-center align-center">
                            <div class="re-btm">床位预约</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 不可选 -->
                    <div v-else class="item-content disabled">
                      <div class="item-header disabled">
                        {{ item.number + '床' }}
                      </div>
                      <div class="item-bottom flex justify-center ">
                        <div class="user-info flex " style="color:#999;">
                          <div class="user-info-item flex space-between">
                            <span>姓名: {{ item.patientRecord.patient.name }}</span>
                            <span>性别: {{ sexObj[item.patientRecord.patient.gender] }}</span>
                            <span>年龄: {{
                              item.patientRecord.age ? item.patientRecord.age : '-'
                            }}</span>
                          </div>
                          <div class="user-info-item">诊断: {{ item.patientRecord.preDiagnosis }}</div>
                          <div class="user-info-item">手术: {{
                            item.patientRecord.operation && item.patientRecord.operation.operation ?
                            item.patientRecord.operation.operation.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">麻醉: {{
                            item.patientRecord.anesthesiaAssessment &&
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode ?
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">医生: {{
                            item.patientRecord.operation && item.patientRecord.operation.chiefDoctor ?
                            item.patientRecord.operation.chiefDoctor.name : '-'
                          }}
                          </div>
                          <!-- <div class="user-info-item">{{
                            item.patientRecord.operation && item.patientRecord.operation.num ?
                            item.patientRecord.operation.operationRoom + '=>' + '第' + item.patientRecord.operation.num +
                            '台次' : '-'
                          }}
                          </div> -->
                          <!-- <div class="tip">当日入院</div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="bed-list all">
                  <div class="bed-item flex " v-for="(item, index) in state.bedList" :key="index"
                    :class="item.patientRecord ? 'selected' : ''">

                    <!-- 如果为可选 -->
                    <div v-if="!item.patientRecord" class="item-content" @click="changeSelectBed(item)">
                      <div class="item-header">
                        {{ item.number + '床' }}
                      </div>
                      <div class="item-bottom ">
                        <div v-if="item.patientRecord" class="user-info flex ">
                          <div class="user-info-item flex space-between">
                            <span>姓名: {{ item.patientRecord.patient.name }}</span>
                            <span>性别: {{ sexObj[item.patientRecord.patient.gender] }}</span>
                            <span>年龄: {{
                              item.patientRecord.age ? item.patientRecord.age : '-'
                            }}</span>
                          </div>

                          <div class="user-info-item">诊断: {{ item.patientRecord.preDiagnosis }}</div>
                          <div class="user-info-item">手术: {{
                            item.patientRecord.operation && item.patientRecord.operation.operation ?
                            item.patientRecord.operation.operation.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">麻醉: {{
                            item.patientRecord.anesthesiaAssessment &&
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode ?
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">医生: {{
                            item.patientRecord.operation && item.patientRecord.operation.chiefDoctor ?
                            item.patientRecord.operation.chiefDoctor.name : '-'
                          }}
                          </div>
                          <!-- <div class="user-info-item">{{
                            item.patientRecord.operation && item.patientRecord.operation.num ?
                            item.patientRecord.operation.operationRoom + '=>' + '第' + item.patientRecord.operation.num +
                            '台次' : '-'
                          }}
                          </div> -->
                          <!-- <div class="tip">当日入院</div> -->
                        </div>
                        <div v-else class="no-user ">
                          <div class="icon-box flex justify-center align-center">
                            <el-icon color="#B4AFAF" size="50">
                              <Postcard />
                            </el-icon>
                          </div>
                          <div class="icon-box flex justify-center align-center">
                            <div class="re-btm">床位预约</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 不可选 -->
                    <div v-else class="item-content disabled">
                      <div class="item-header disabled">
                        {{ item.number + '床' }}
                      </div>
                      <div class="item-bottom flex justify-center ">
                        <div class="user-info flex " style="color:#999;">
                          <div class="user-info-item flex space-between">
                            <span>姓名: {{ item.patientRecord.patient.name }}</span>
                            <span>性别: {{ sexObj[item.patientRecord.patient.gender] }}</span>
                            <span>年龄: {{
                              item.patientRecord.age ? item.patientRecord.age : '-'
                            }}</span>
                          </div>
                          <div class="user-info-item">诊断: {{ item.patientRecord.preDiagnosis }}</div>
                          <div class="user-info-item">手术: {{
                            item.patientRecord.operation && item.patientRecord.operation.operation ?
                            item.patientRecord.operation.operation.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">麻醉: {{
                            item.patientRecord.anesthesiaAssessment &&
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode ?
                            item.patientRecord.anesthesiaAssessment.anesthesiaMode.name : '-'
                          }}
                          </div>
                          <div class="user-info-item">医生: {{
                            item.patientRecord.operation && item.patientRecord.operation.chiefDoctor ?
                            item.patientRecord.operation.chiefDoctor.name : '-'
                          }}
                          </div>
                          <!-- <div class="user-info-item">{{
                            item.patientRecord.operation && item.patientRecord.operation.num ?
                            item.patientRecord.operation.operationRoom + '=>' + '第' + item.patientRecord.operation.num +
                            '台次' : '-'
                          }}
                          </div> -->
                          <!-- <div class="tip">当日入院</div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- </el-scrollbar> -->
              </div>

            </el-card>
          </el-col>
        </el-row>

      </div>
      <!-- <div class="version">
      当前版本: {{ versions.version }}
    </div> -->

    </div>
  </div>
</template>

<script setup name="applyForm">
import { usePatientDetail } from '/@/stores/patientDetail';
import { storeToRefs } from 'pinia'
import { useUserInfo } from '/@/stores/userInfo';

const stores = usePatientDetail();
const userstores = useUserInfo();
const { sexObj } = storeToRefs(stores);
const { versions } = storeToRefs(userstores);
import header_logo from '/@/assets/header_logo.png';
import { applyformApi } from '/@/api/ds/apply_form'
import { toolsApi } from '/@/api/tools'

import { NextLoading } from '/@/utils/loading';
import dayjs from 'dayjs'
import { formatWeedDay } from '/@/utils/formatTime';
import { useRouter } from 'vue-router';

import icon from '/@/assets/meow.png';

const router = useRouter()
import {
  ArrowLeftBold,
  ArrowRightBold,
  Postcard,
  School
} from '@element-plus/icons-vue'
import { dsApi } from "/@/api/ds";
import { ElMessage } from "element-plus";
import { onBeforeMount } from "vue";
import { Session } from '/@/utils/storage';
import { initBackEndControlRoutes } from "/@/router/backEnd";


const step = ref("1") //步骤
const pageMainRef = ref(null);
const operation_form = ref({
  department: '',//手术科室
  hospital_area: '1',//入院病区
  diagnosis: '',//术前诊断
  operation: '',//执行手术
  doctor: '',//主刀医生
  anesthesia: "",//麻醉方式
  anesthesia_mode: "",//拟行麻醉
  contact: ""//联系方式
})
const ruleFormRef = ref({});
const patientDetailFormRef = ref({})
const patientDetail = ref({

})
const rules = reactive({
  department: [{ required: true, message: '请选择手术科室', trigger: 'change' }],
  // hospital_area: [{ required: true, message: '请选择入院病区', trigger: 'change' }],
  diagnosis: [{ required: true, message: '请选择术前诊断', trigger: 'change' }],
  operation: [{ required: true, message: '请选择执行手术', trigger: 'change' }],
  doctor: [{ required: true, message: '请选择主刀医生', trigger: 'change' }],
  anesthesia_mode: [{ required: true, message: '请选择拟行麻醉', trigger: 'change' }],
  contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
})
const patientDetailRules = reactive({
  hzxm: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
  lxdh: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  ysmc: [{ required: true, message: '请选择就诊医生', trigger: 'change' }],
  ksmc: [{ required: true, message: '请选择就诊科室', trigger: 'change' }],
  sfzh: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
  zyzdmc: [{ required: true, message: '请选择入院诊断', trigger: 'change' }],
})
const form = reactive({
  dept: '',
  ward: '',
  diagnosis: '',
  operation: '',
  surgeon: '',
  phone: '',
  anesthesia: '',
  anesthesiologist: '',
});

const state = reactive({
  patient_record_id: '',
  bedLoading: false,
  departmentLoading: false,//科室loading
  confirmLoading: false,//确认loading
  departmentList: [],
  hospitalAreaList: [],
  diagnosisList: [],
  operationApiData: {
    departmentId: null,
    doctorId: null
  },
  operationList: [],
  anesthesiaModeList: [],
  hospitalAreaId: '',
  doctorApiData: {
    chiefStatus: null,
    hospitalAreaId: null,
    departmentId: null
  },
  doctorList: [],
  checkedDay: null,
  dayArr: [],
  timeSlot: '上午',
  areaId: '',
  operatRoomList: [],
  bedStatus: '',
  bedList: [],
  checkedBedId: '2', // 选中的床位,

  checkedOpId: '1', //选中的台次
  operation_time: '',
  visit_doctor_id: "",
  checkedList: [],
  departmentObj: null,
  serialNumber: '',
  chiefDoctorApiData: {
    chiefStatus: 1,
    hospitalAreaId: null,
    departmentId: null
  },
  chiefDoctorList: [], // 主刀医生列表
  anesthesiaDoctorList: [], // 麻醉医生列表
  isViewAllBed: false,
  checkedIds: []
});
onBeforeUnmount(() => {

});
// 页面加载时

onMounted(async () => {
  NextLoading.done();

  // 从url中获取数据至 patientDetail
  const queryObject = Object.keys(router.currentRoute.value.query).reduce((obj, key) => {
    obj[key.toLowerCase()] = router.currentRoute.value.query[key].toLowerCase()
    return obj
  }, {})
  patientDetail.value = queryObject
  console.log('patientDetail', patientDetail.value)


  // 查看当前有无token 没有的话 通过医生代码YSDM 获取token
  const token = Session.get('token');
  console.log('token', token)
  if (!token) {
    const res = await applyformApi().getToken({ jobNo: router.currentRoute.value.query.YSDM ? router.currentRoute.value.query.YSDM : 10006 })
    Session.set("token", res.data.accessToken)
  }

  // 通过 医生代码YSDM来获取 visit_doctor_id
  const ress = await applyformApi().getUserIdByJobNo({ jonNo: router.currentRoute.value.query.YSDM ? router.currentRoute.value.query.YSDM : 10006 })
  state.visit_doctor_id = ress.data.uid
  if (!ress.data.uid) { // 如果获取的为空 清空
    patientDetail.value.ysmc = ''
  }

  // 通过科室代码 ksdm来获取科室id和科室名称
  const departmentRes = await applyformApi().getDepartmentByKSDM({ departmentNo: patientDetail.value.ksdm })
  state.departmentObj = { id: departmentRes.data.departmentId }
  operation_form.value.department = state.departmentObj.id // 手术科室默认为就诊科室
  state.chiefDoctorApiData.departmentId = state.departmentObj.id
  state.operationApiData.departmentId = state.departmentObj.id
  if (!departmentRes.data.departmentId) { // 如果获取的为空 清空
    patientDetail.value.ksmc = ''
  }

  getOption()

  try {
    const patient = await applyformApi().patientDetail({ recordID: router.currentRoute.value.query.GHXH })
    if (patient?.data?.patientId) {
      console.log("患者信息已存在")

      state.patient_record_id = patient.data.id
      state.serialNumber = patient.data.serialNumber
      if (patient.data) {
        patientDetail.value.ksmc = patient.data.visitingDepartment ? patient.data.visitingDepartment.departmentName : ''
        patientDetail.value.ysmc = patient.data.visitingDoctor ? patient.data.visitingDoctor.name : ''

        operation_form.value.department = patient.data.operation ? patient.data.operation.departmentId : ''
        operation_form.value.hospital_area = patient.data.hospitalArea ? patient.data.hospitalArea.id : '1'
        operation_form.value.doctor = patient.data.operation ? patient.data.operation.chiefDoctorId : ''
        operation_form.value.contact = patient.data.patient.phone
        operation_form.value.operation = patient.data.operation ? patient.data.operation.operationId : ''
        operation_form.value.anesthesia = patient.data.anesthesiaAssessment ? patient.data.anesthesiaAssessment.anaesthetistId : ''
        operation_form.value.anesthesia_mode = patient.data.anesthesiaAssessment ? patient.data.anesthesiaAssessment.anesthesiaModeId : ''

        state.chiefDoctorApiData.departmentId = patient.data.operation ? patient.data.operation.departmentId : ''
        state.operationApiData.departmentId = patient.data.operation ? patient.data.operation.departmentId : ''

        const checkedIds = []
        if(patient.data.daytimeAssessmentItems.length){
          patient.data.daytimeAssessmentItems.forEach(item=>{
            checkedIds.push(item.id)
          })
        }
        state.checkedIds = checkedIds
      }

    } else {
      //患者不存在 需要先创建患者

    }
  } catch (e) {
    console.log("出现了异常", e)

    console.log("患者信息不存在")
    let patientDetail_obj = patientDetail.value

    var post_data = {
      patient: {
        photo: null,
        name: patientDetail_obj.hzxm ?? null,//患者姓名
        gender: patientDetail_obj.sex ?? null,//性别
        identityType: 1,//身份证
        identity: patientDetail_obj.sfzh ?? null,//身份证号
        phone: patientDetail_obj.lxdh ?? null,//联系电话
        hospitalId: patientDetail_obj.hospital_id ?? null//住院号
      },
      patientRecord: {
        recordId: patientDetail_obj.ghxh,//就诊号
        visitingDoctorId: state.visit_doctor_id,//就诊医生代码
        age: patientDetail_obj.age,//年龄
        visitingDepartmentId: state.departmentObj.id,//就诊科室代码
        preDiagnosis: patientDetail_obj.zyzdmc ? patientDetail_obj.zyzdmc.trim() : '',//诊断
        hospitalAreaId: null,//病区
        hospitalBedId: null,//病床
        preDiagnosisCode: patientDetail_obj.zyzddm,
        patid: patientDetail_obj.patid
      },
    }
    applyformApi().doApply(post_data).then(res => {
      state.patient_record_id = res.data.patientRecord.id
      state.serialNumber = res.data.patientRecord.serialNumber
      ElMessage.success('创建操作成功');
    }).catch(() => {
    })
  }

  console.log('patientDetail', patientDetail)
  getDays()
  getOperationRoomDatas()
  getSelectDepartments()
  getHospitalArea()
  getDianosisList()
  getOperationList()
  getDoctorList()
  getAnesthesiaMode()
  getBedList()
  getChiefDoctorList()
  getAnesthesiaDoctorList()


});

const getOption = () => {

  applyformApi().getOption().then(res => {
    var arr = [];
    res.data.forEach(item => {
      arr.push(item.id)
    })
    // console.log(arr)
    state.checkedList = res.data
    state.checkedIds = arr
  })
}

const changeDoctor = (val) => {
  operation_form.value.contact = val
}

const searchBedChange = () => {
  getBedList()
}
const getBedList = () => {
  state.bedLoading = true
  const apiData = {
    hospitalAreaId: state.hospitalAreaId,
    status: state.bedStatus,
    operationAt: dayjs(state.checkedDay * 1000).format('YYYY-MM-DD'),
  }
  toolsApi().hospitalBeds(apiData).then(res => {
    state.bedLoading = false
    state.bedList = res.data
  }).catch(() => {
    state.bedLoading = false
  })
}
const getDays = () => {
  const dayArr = []
  dayArr.push(dayjs().startOf('day').unix())
  dayArr.push(dayjs().startOf('day').add(1, "days").unix())
  dayArr.push(dayjs().startOf('day').add(2, "days").unix())
  dayArr.push(dayjs().startOf('day').add(3, "days").unix())
  dayArr.push(dayjs().startOf('day').add(4, "days").unix())
  dayArr.push(dayjs().startOf('day').add(5, "days").unix())


  state.checkedDay = dayjs().startOf('day').unix()
  state.dayArr = dayArr
}

const formatValue = (value) => {
  return dayjs(value * 1000).format("M.DD") + ' ' + '（' + formatWeedDay(dayjs(value * 1000).day()) + '）'
}

const changeDay = (value) => {
  state.checkedDay = value
  // getOperationRoomDatas()
  getBedList()
}

const nextOrPrevDayArr = (type) => {
  if (type == 'next') {
    const nextDayArr = []
    nextDayArr.push(state.dayArr[5] + 86400)
    nextDayArr.push(state.dayArr[5] + 86400 * 2)
    nextDayArr.push(state.dayArr[5] + 86400 * 3)
    nextDayArr.push(state.dayArr[5] + 86400 * 4)
    nextDayArr.push(state.dayArr[5] + 86400 * 5)
    nextDayArr.push(state.dayArr[5] + 86400 * 6)
    state.dayArr = nextDayArr
    state.checkedDay = nextDayArr[0]
  } else {
    const prevDayArr = []

    prevDayArr.push(state.dayArr[0] - 86400 * 6)
    prevDayArr.push(state.dayArr[0] - 86400 * 5)
    prevDayArr.push(state.dayArr[0] - 86400 * 4)
    prevDayArr.push(state.dayArr[0] - 86400 * 3)
    prevDayArr.push(state.dayArr[0] - 86400 * 2)
    prevDayArr.push(state.dayArr[0] - 86400)

    state.dayArr = prevDayArr
    state.checkedDay = prevDayArr[0]
  }
  getBedList()
}


const changeSelectOp = (operationRoom, num) => {
  const apiData = {
    patientRecordId: state.patient_record_id,
    operationAt: dayjs(state.checkedDay * 1000).format('YYYY-MM-DD'),
    period: state.timeSlot == '上午' ? 'AM' : 'PM',
    operationRoom: operationRoom,
    num: num
  }

  dsApi().recordOperation(apiData).then(res => {
    ElMessage.success('操作成功');
    getOperationRoomDatas()
  }).catch(() => {

  })
}

// 获取手术室列表
const changeSelectBed = (item) => {
  const apiData = {
    patientRecordId: state.patient_record_id,
    hospitalAreaId: state.hospitalAreaId,
    hospitalBedId: item.id,
    operationAt: dayjs(state.checkedDay * 1000).format('YYYY-MM-DD'),
  }

  dsApi().recordBed(apiData).then(res => {
    ElMessage.success('操作成功');
    getBedList()
  }).catch(() => {
    ElMessage.error(res.errMsg);
  })
}

// 获取手术室列表
const getSelectDepartments = () => {
  applyformApi().getDepartments().then(res => {
    state.departmentList = res.data
  })
}


// 获取医院区域
const getHospitalArea = () => {
  applyformApi().getHospitalArea().then(res => {
    state.hospitalAreaList = res.data

    state.hospitalAreaId = res.data[0].id
  })
}


// 获取诊断列表
const getDianosisList = () => {
  applyformApi().getDianosisList().then(res => {
    state.diagnosisList = res.data
  })
}

// 获取手术列表
const getOperationList = () => {
  applyformApi().getOperationList(state.operationApiData).then(res => {
    state.operationList = res.data
  })
}

// 获取医生列表
const getDoctorList = () => {
  applyformApi().getDoctorList(state.doctorApiData).then(res => {
    state.doctorList = res.data
  })
}

// 手术信息 科室change
const opDepartmentChange = (val) => {
  if (val) {
    state.chiefDoctorApiData.departmentId = val
    state.operationApiData.departmentId = val
  } else {
    state.chiefDoctorApiData.departmentId = null
    state.operationApiData.departmentId = null
  }
  getChiefDoctorList()
  getOperationList()
  operation_form.value.doctor = ''
  operation_form.value.operation = ''
}


// 就诊科室change
const departmentChange = (val) => {
  if (val) {
    state.doctorApiData.departmentId = val
    state.departmentObj.id = val
  } else {
    state.doctorApiData.departmentId = null
    state.departmentObj.id = null
  }
  getDoctorList()
  patientDetail.value.ysmc = ''
}

// 就诊医生change
const doctorChange = (val) => {
  if (val) {
    state.visit_doctor_id = val
  } else {
    state.visit_doctor_id = null
  }
}

const opAreaChange = (val) => {
  // if (val) {
  //   state.chiefDoctorApiData.hospitalAreaId = val
  // } else {
  //   state.chiefDoctorApiData.hospitalAreaId = null
  // }
  // getChiefDoctorList()
  // operation_form.value.doctor = ''

}

const opChiefDoctorChange = (val) => {
  if (val) {
    state.operationApiData.doctorId = val
  } else {
    state.operationApiData.doctorId = null
  }
  getOperationList()
  operation_form.value.operation = ''
}


// 获取主刀医生列表
const getChiefDoctorList = () => {
  applyformApi().getDoctorList(state.chiefDoctorApiData).then(res => {
    state.chiefDoctorList = res.data
  })
}

// 获取麻醉医生列表
const getAnesthesiaDoctorList = () => {
  applyformApi().getAnesthesiaDoctorList().then(res => {
    state.anesthesiaDoctorList = res.data
  })
}


// 获取麻醉方式
const getAnesthesiaMode = () => {
  applyformApi().getAnesthesiaMode().then(res => {
    state.anesthesiaModeList = res.data
  })
}


//手术时段选择
const periodChange = () => {
  getOperationRoomDatas()
}

const confirm = (refs) => {
  state.confirmLoading = true

  refs.validate((valid, fields) => {
    if (valid) {
      let patientDetail_obj = patientDetail.value
      let operation_form_obj = operation_form.value

   

      var post_data = {
        patient: {
          photo: null,
          name: patientDetail_obj.hzxm ?? null,//患者姓名
          gender: patientDetail_obj.sex ?? null,//性别
          identityType: 1,//身份证
          identity: patientDetail_obj.sfzh ?? null,//身份证号
          phone: patientDetail_obj.lxdh,//联系电话
          hospitalId: patientDetail_obj.hospital_id//住院号
        },
        patientRecord: {
          recordId: patientDetail_obj.ghxh,//就诊号
          visitingDoctorId: state.visit_doctor_id,//就诊医生代码
          age: patientDetail_obj.age,//年龄
          visitingDepartmentId: state.departmentObj.id,//就诊科室代码
          preDiagnosis: patientDetail_obj.zyzdmc ? patientDetail_obj.zyzdmc.trim() : '',//诊断
          hospitalAreaId: operation_form_obj.hospital_area,//病区
          hospitalBedId: null,//病床
          preDiagnosisCode: patientDetail_obj.zyzddm,
          patid: patientDetail_obj.patid
        },
        patientRecordOperation: {
          departmentId: operation_form_obj.department.toString(),//科室
          diagnosis: operation_form_obj.diagnosis.toString(),//诊断
          operationId: operation_form_obj.operation.toString(),//手术
          chiefDoctorId: operation_form_obj.doctor.toString(),//主刀医生
          chiefDoctorPhone: operation_form_obj.contact,//联系方式
        },
        patientRecordAnesthesiaAssessment: {
          anesthesiaModeId: operation_form_obj.anesthesia_mode,//麻醉方式
          anaesthetistId: operation_form_obj.anesthesia,//麻醉医生
        },
        daytimeAssessmentItems: state.checkedIds
      }
      if (!state.patient_record_id) {
        //当患者id 不存在 新增
        console.log("患者不存在 执行新增")
        applyformApi().doApply(post_data).then(res => {
          state.patient_record_id = res.data.patientRecord.id
          state.confirmLoading = false
          ElMessage.success('操作成功');
          step.value = 2;
          setTimeout(() => {
            window.location.reload()
          }, 1000);
        }).catch(() => {
          state.confirmLoading = false
        })
      } else {
        post_data.prid = state.patient_record_id
        state.confirmLoading = false
        console.log("患者存在 执行更新")
        applyformApi().updatePatient(post_data).then(res => {
          ElMessage.success('操作成功');
          setTimeout(() => {
            window.location.reload()
          }, 1000);
        })
      }
    } else {
      state.confirmLoading = false

      console.log('error submit!', fields)
    }
  })
}
//获取手术室数据
const getOperationRoomDatas = () => {
  state.departmentLoading = true

  const apiData = {
    operationAt: dayjs(state.checkedDay * 1000).format('YYYY-MM-DD'),
    period: state.timeSlot == '上午' ? 'AM' : 'PM'
  }
  toolsApi().operationRooms(apiData).then(res => {
    state.departmentLoading = false
    state.operatRoomList = res.data
  }).catch(() => {
    state.departmentLoading = false
  })

}

const changeBedView = () => {
  state.isViewAllBed = !state.isViewAllBed
  nextTick(() => {
    pageMainRef.value.scrollTop = pageMainRef.value.scrollHeight;
  });
}
</script>

<style lang="scss" scoped>
:deep() .el-card__header {
  padding: 10px 20px;
}

.space-card {
  :deep() .el-card__header {
    display: flex;
    justify-content: space-between;
  }
}



:deep() .el-card__body {
  padding: 10px 20px;
}

.jz-card {
  :deep() .el-card__body {
    padding: 0px 20px 10px;
  }
}

.op-card {
  :deep() .el-card__body {
    padding: 0px 20px 18px;
  }
}

.version {
  text-align: center;
  color: #999;
  margin-top: 20px;
}

.btm-card {
  :deep() {
    .el-card__body {
      padding-bottom: 40px;
    }
  }
}

.bed-user-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 25px;
  color: #409eff;
  font-weight: bold;
}

.bed-user-label {
  margin-right: 10px;
}

:deep() .bed-card-class {
  width: 180px;
  height: 280px;
  margin-left: 30px;
  margin-top: 10px;
}

.bed-class {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 0px 0px 5px;

  &-card1 {
    &-content {
      text-align: center;
    }
  }

  :deep() {
    .el-card {
      &__header {
        text-align: center;
      }

      &__body {
        color: black !important;
        font-weight: bold;
      }
    }
  }

  &-card2 {
    height: 490px;
    margin-top: 10px;

    &-content {
      text-align: center;

      .order-chart {
        width: 100%;
        height: 296px;
      }
    }
  }
}

.form-hr {
  margin-top: 25px;
  margin-bottom: 25px;
}

.bed-box {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.bed-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bed-icon {
  top: 45px;
  font-size: 50px;
}

.bed-text {
  color: rgb(244, 109, 101);
  font-weight: bold;
  font-size: 19px;
  position: relative;
  bottom: -118px;
  border: 2px solid rgb(244, 109, 101);
  border-radius: 12%;
}

.square-box {
  width: 50%;
  height: 100%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.square-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.square-text {
  color: #409eff;
  font-weight: bold;
  font-size: 25px;
}

.square-icon-text {
  font-size: 55px;
}

.person {
  width: 130px;
  height: 50px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin-left: 30px;
  margin-bottom: 10px;
  border-radius: 12%;
}

.person:hover {
  border-color: #1890ff;
}

.person.selected {
  border: 3px solid #1890ff;
}

.person-name {
  text-align: center;
}

.el-icon-circle-check {
  display: none;
  color: #fff;
  background-color: #1890ff;
  width: 20px;
  height: 20px;
  border-radius: 5%;
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding-left: 4px;
  padding-top: 4px;
}

.person.selected .el-icon-circle-check {
  display: block;
}

.triangle {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - 10px);
  border: 10px solid transparent;
  border-top: 10px solid #409eff;
}


.page-main {
  padding: 15px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-top: 0;

  .common-title {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-left: 10px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      width: 2px;
      height: 70%;
      background-color: #409EFF;
    }
  }
}

.row {
  margin-top: -10px;
  margin-bottom: -10px;

  .row-left {
    width: 60%;
  }

  .row-right {
    width: 39%;
  }

  :deep() .el-checkbox__label {
    display: inline-grid;
    width: 100%;
    white-space: pre-line;
    word-wrap: break-word;
    line-height: 20px;
  }
}



.el-checkbox__input.is-checked {
  background-color: #409eff;
}

.form-item-border {}

.form-row {
  margin-top: 10px;
  margin-bottom: 10px;
}

.form-row-no-margin {
  margin-bottom: 0;
}

.form-container {
  border: 1px solid #ccc;
  padding: 10px;
}

.el-form-item {
  border-right: 1px solid #ccc;
}

/* 去掉最后一个表单项的右边框 */
.el-form-item:last-child {
  border-right: none;
}

.card-confirm {
  position: relative;
  display: inline-block;
  margin-left: 20px;

  &::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(129, 179, 55);

    /* 如果您需要同时设置::before和::after的样式，可以使用下面的方式 */
    &.confirm-before {
      background-color: rgb(86, 90, 94);
    }

    &.confirm-after {
      background-color: rgb(129, 179, 55);
    }
  }
}


.card-confirm-after {
  position: relative;
  display: inline-block;
  margin-left: 20px;

  &::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;

    background-color: rgb(86, 90, 94);

  }
}


.card-confirm-icon {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  left: 3px;
  top: 2px;
  color: white;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
}

.card-title-ic {
  width: 4px;
  height: 35px;
  border-style: none;
  border-color: unset;
  border-radius: 3px;
  font-size: 22px;
  padding: 0px;
  text-align: center;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  background: rgb(24, 144, 255);
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: rgb(244, 250, 255);
}

.logo {
  margin-left: 20px;
}

.title {
  font-size: 38px;
  font-weight: bold;
}

.sn {
  margin-right: 20px;
}

.op-list {
  height: calc(100% - 70px);

  .op-item {
    width: 100%;
    height: 100px;

    .item-right {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 15px;
      padding-top: 10px;
    }
  }
}

.step-box {
  height: 136px;
  padding-top: 60px;

  // padding: 60px 0 20px;
  :deep() .el-step__icon-inner {
    display: none !important;
  }

  :deep() .el-step__icon {
    width: 20px;
    height: 20px;
  }

  :deep() .el-step__title.is-finish {
    color: white !important;
  }

  :deep() .el-step__title.is-process {
    color: white !important;
  }

  :deep() .el-step__title.is-wait {
    color: white !important;
  }

  :deep() .el-step__title {
    height: 35px;
    background: #1890ff !important;
    white-space: nowrap !important;
  }

  :deep() .el-step__title::after {
    content: '';
    position: absolute;
    bottom: -13px;
    /* 调整为更大的值 */
    left: 48%;
    /* 调整为50% */
    transform: translateX(-50%) rotate(110deg);
    border-width: 10px;
    border-style: solid;
    border-color: #1890ff transparent transparent transparent;
  }

  :deep() .el-step__main {
    position: absolute;
    top: -50px;
    /* 将主要元素移动到圆圈正上方 */
    left: 50%;
    width: 150px;
    transform: translateX(-50%);
  }
}


.time-line {
  flex-wrap: wrap;
  padding: 0px 0;

  .time-top,
  .time-bottom {
    width: 100%;
  }

  .time-list {
    width: calc(100% - 120px);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
  }

  .time-item {
    position: relative;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    background-color: rgba(244, 250, 255, 1);
    color: #3081F4;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    padding: 0 10px;
    cursor: pointer;

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -10px;
      transform: translateX(-6px);
      border-width: 6px;
      border-style: solid;
      border-color: rgb(244, 250, 255) transparent transparent transparent;
    }

    &.active {
      color: #fff;
      background-color: #3081F4;

      &::after {
        border-color: #3081F4 transparent transparent transparent;
      }
    }

  }

  .time-bottom {
    margin-top: 10px;

    .bottom-list {
      width: calc(100% - 120px);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 15px;
    }

    .bottom-item {
      position: relative;
      height: 32px;
      padding: 0 10px;

      .line {
        position: absolute;
        width: 100%;
        height: 2px;
        left: 53%;
        right: -50%;
        top: 14px;
        background-color: #D9D9D9;
        z-index: 10;
      }

      .round {
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #D9D9D9;
        z-index: 30;
        background-color: #fff;

        &.active {
          border: 2px solid #3081F4;
        }

        .center {
          position: absolute;
          left: 3px;
          top: 3px;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #D9D9D9;

          &.active {
            background-color: #3081F4;
          }
        }
      }
    }
  }

}

.time-slot,
.area-slot {
  margin: 20px 0;

  span {
    margin-right: 20px;
  }
}

.area-slot {
  padding-bottom: 20px;
}

.op-room-list {
  .op-room-item {
    margin-bottom: 32px;

    .item-left {
      flex-wrap: wrap;
      width: 180px;
      height: 227px;
      border-radius: 8px;
      background-color: rgba(245, 245, 245, 1);
      color: rgba(48, 129, 244, 1);

      .icon {
        width: 100%;
        text-align: center;
        margin-top: 60px;
      }

      .name {
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
    }

    .item-right {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      width: calc(100% - 200px);

      .op-item {
        border: 1px solid rgba(199, 199, 208, 1);
        border-radius: 8px;
        line-height: 60px;

        &.selected {
          background-color: rgba(244, 250, 255, 1);
          color: rgba(48, 129, 244, 1);
          border: 2px solid rgba(48, 129, 244, 1);
        }

        .content {
          width: 100%;
          cursor: pointer;
          padding: 0 20px;

          &.disabled {
            cursor: no-drop;
          }
        }
      }
    }
  }
}

.bed-box {
  margin-bottom: 50px;
  margin-top: 10px;
}

.bed-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;

  &.all {
    transition: height 1s;
    -moz-transition: height 1s;
    -webkit-transition: height 1s;
    -o-transition: height 1s;
  }

  .bed-item {
    flex-direction: column;
    height: 154px;
    border-radius: 8px;
    border: 1px solid rgba(224, 224, 224, 1);

    .item-content {
      height: 100%;
      cursor: pointer;

      &.disabled {
        cursor: no-drop;
      }
    }

    .item-header {
      height: 35px;
      text-align: center;
      background-color: rgba(245, 245, 245, 1);
      border-bottom: 1px solid rgba(224, 224, 224, 1);
      line-height: 35px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      font-size: 15px;

      &.disabled {
        color: #999;
      }
    }

    .item-bottom {
      height: calc(100% - 35px);
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    &.selected {
      border: 1px solid rgba(48, 129, 244, 1);

      .item-header {
        background-color: #3081F4;
        color: #fff;
      }

      .item-bottom {
        background-color: #F4FAFF;
        color: #3081F4;
      }
    }

    .no-user {
      display: flex;
      flex-wrap: wrap;

      .icon-box {
        width: 100%;
        margin-top: 10px;
      }
    }


    .user-info {
      position: relative;
      padding: 5px;
      flex-wrap: wrap;

      .tip {
        position: absolute;
        right: 0;
        top: 20px;
        width: 76px;
        height: 23px;
        color: #FF5353;
        border: 1px solid #FF5353;
        border-right: none;
        border-radius: 10px 0px 0px 10px;
        text-align: center;
      }

      .user-info-item {
        width: 100%;
        margin-bottom: 2px;
      }
    }

    .re-btm {
      width: 70px;
      height: 22px;
      text-align: center;
      line-height: 22px;
      color: rgba(255, 83, 83, 1);
      font-size: 12px;
      border-radius: 100px;
      border: 1px solid rgba(255, 83, 83, 1);
    }
  }
}
</style>
